<template>
  <div>
    <div class="header-container">
      <h1>消息中心</h1>
      <TabItem
        :tabs="tabs"
        :active-index="activeIndex"
        @handleClick="handleClick"
      />
    </div>
    <div class="middle-container" />
    <div class="main-container">
      <div class="choose-container">
        <div class="txt">
          <el-checkbox v-model="checked" @change="handleCheckAllChange" />
          <div>全选</div>
          <div class="del-item" @click="delSelect">删除</div>
        </div>
      </div>
      <div v-if="activeIndex == 0" class="table-container">
        <div class="table-title">
          <span>信息内容</span>
          <span>时间</span>
          <span>操作</span>
        </div>
        <el-checkbox-group
          v-model="personalOrders"
          @change="handleCheckedOrdersChange"
        >
          <div
            v-for="item in personalMsgData"
            :key="item.id"
            class="table-item"
            style="font-size:14px;"
          >
            <el-checkbox
              v-model="item.checked"
              class="single"
              :label="item.id"
            />
            <div class="content">{{ item.newsContent }}</div>
            <div class="date">{{ parseTime(item.createdTime,'{y}-{m}-{d}') }}</div>
            <div class="details" @click="checkDetails(item.id)">
              查看详情
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <div v-else-if="activeIndex == 1" class="table-container">
        <div class="table-title">
          <span>信息内容</span>
          <span>时间</span>
          <span>操作</span>
        </div>
        <el-checkbox-group
          v-model="listSystemOrders"
          @change="handleCheckedOrdersChange"
        >
          <div
            v-for="item in listSystemMsgData"
            :key="item.id"
            class="table-item"
            style="font-size:14px;"
          >
            <el-checkbox
              v-model="item.checked"
              class="single"
              :label="item.msgGroupId"
            />
            <div class="content" v-html="item.msgContent" />
            <div class="date">{{ parseTime(item.sendTime,'{y}-{m}-{d}') }}</div>
            <div class="details" @click="checkDetails(item.msgGroupId)">
              查看详情
            </div>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page.sync="pageIndex"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import TabItem from './components/Tab'
import {
  getCount,
  listPersonalMsg,
  listSystemMsg,
  deletePersonalMsg,
  deleteUserSysMsgByGroupIds
} from '@/api/message/message'

export default {
  components: {
    TabItem
  },
  data() {
    return {
      tabs: [
        {
          name: '个人消息',
          num: 0
        },
        {
          name: '系统消息',
          num: 0
        }
      ],
      activeIndex: 0,
      personalMsgData: [],
      listSystemMsgData: [],
      personalOrders: [], // 勾选个人消息的id的集合
      listSystemOrders: [], // 勾选系统消息的id的集合
      checked: false,
      pageSize: 2,
      pageIndex: 1,
      total: 0
    }
  },
  watch: {
    // 单选个人消息切换
    personalOrders(newPersonalOrders) {
      this.checked =
        newPersonalOrders.length === this.personalMsgData.length
    },
    // 单选系统消息切换
    listSystemOrders(newListSystemOrders) {
      this.checked =
        newListSystemOrders.length === this.listSystemMsgData.length
    },
    // 发起请求
    activeIndex(newIndex) {
      this.pageIndex = 1
      if (newIndex == 0) {
        this.listPersonalMsg = 'listPersonalMsg'
        this.getListPersonalMsg()
        this.listSystemOrders.length = 0
      } else {
        this.listPersonalMsg = 'listSystemMsg'
        this.getlistSystemMsg()
        this.personalOrders.length = 0
      }
    }
  },
  created() {
    //  加载系统消息和个人消息的未读数量
    this.getCount()
    this.getListPersonalMsg()
  },

  methods: {
    //  加载系统消息和个人消息的未读数量
    getCount() {
      const resNum = getCount().then(res => {
        this.tabs[0].num = res.data.personalNum
        this.tabs[1].num = res.data.systemNum
      })
    },

    // 切换状态
    handleClick(index) {
      this.activeIndex = index
      this.checked = false
    },

    // 获取个人消息列表
    getListPersonalMsg() {
      listPersonalMsg(this.pageIndex, this.pageSize).then(res => {
        const tableData = res.data.records
        this.total = res.data.total
        tableData.forEach(e => {
          e.checked = false
        })
        this.personalMsgData = [...tableData]
      })
    },

    // 获取系统消息列表
    getlistSystemMsg() {
      listSystemMsg(this.pageIndex, this.pageSize).then(res => {
        const tableData = res.data.records
        this.total = res.data.total
        tableData.forEach(e => {
          e.checked = false
        })
        //  this.listSystemMsgData = Object.assign([],tableData)
        this.listSystemMsgData = [...tableData]
      })
    },

    // 查看详情
    checkDetails(id) {
      if (this.activeIndex == 0) {
        this.$router.push({
          path: '/message-center-detail',
          query: {
            id,
            type: 0
          }
        })
      } else {
        this.$router.push({
          path: '/message-center-detail',
          query: {
            msgGroupId: id,
            type: 1
          }
        })
      }
    },

    // 实现全选
    handleCheckAllChange(val) {
      if (this.activeIndex == 0) {
        // 全选全不选个人消息
        this.personalMsgData.forEach(e => {
          e.checked = this.checked
        })
        this.personalOrders = val ? this.personalMsgData.map(v => v.id) : []
      } else {
        // 全选全不选系统消息
        this.listSystemMsgData.forEach(e => {
          e.checked = this.checked
        })
        this.listSystemOrders = val ? this.listSystemMsgData.map(v => v.msgGroupId) : []
      }
    },

    handleCheckedOrdersChange(value) {
      console.log(value)
    },
    // 页个数数改变的时候可获取当前显示个数
    handleSizeChange(size) {
      this.pageSize = size
    },
    // 页数改变的时候可获取当前显示当前页码数
    handleCurrentChange(currentPage) {
      console.log(currentPage)
      this.pageIndex = currentPage
      this.checked = false
      if (this.activeIndex == 0) {
        this.getListPersonalMsg()
      } else {
        this.getlistSystemMsg()
      }
    },
    // 删除
    delSelect() {
      if (this.activeIndex == 0) {
        if (!this.personalOrders.length) {
          this.$message('您还未选中任何消息')
          return false
        }
        deletePersonalMsg(this.personalOrders.toString()).then(res => {
          console.log(res)
          if (res.code === 1) {
            this.getListPersonalMsg() // 重新加载个人数据
            this.$message({
              message: '消息删除成功',
              type: 'success'
            })
            this.checked = false
            this.personalOrders.length = []
            // this.getListPersonalMsg()
          } else {
            this.$message('删除消息失败，请稍后重试')
          }
        })
      } else {
        // // listSystemOrders
        if (!this.listSystemOrders.length) {
          this.$message('您还未选中任何消息')
          return false
        }
        deleteUserSysMsgByGroupIds(this.listSystemOrders.toString()).then(
          res => {
            if (res.code === 1) {
              this.getlistSystemMsg() // 重新加载系统数据
              this.$message({
                message: '消息删除成功',
                type: 'success'
              })
              this.checked = false
              this.listSystemOrders = []
            } else {
              this.$message('删除消息失败，请稍后重试')
            }
          }
        )
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-pagination {
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  // margin-top: 20px;
  background-color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #fff;
  color: #ff3b30ff;
  border: 1px solid #ff3b30ff;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled) {
  // background-color: #fff;
  border: 1px solid #ddddddff;
}
::v-deep .el-pagination.is-background .btn-prev {
  border: 1px solid #ddddddff;
  padding: 0 15px;
}
::v-deep .el-icon-arrow-left:before {
  content: "上一页";
}
::v-deep .el-pagination.is-background .btn-next {
  border: 1px solid #ddddddff;
  padding: 0 15px;
}
::v-deep .el-icon-arrow-right:before {
  content: "下一页";
}
::v-deep .el-checkbox__label {
  display: none;
}
input:hover {
  cursor: pointer;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #fff;
  border-color: #ff3b30;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: #ff3b30;
}
::v-deep .el-checkbox__inner {
  border: 1px solid #ff3b30;
}
.header-container {
  height: 57px;
  background-color: #fff;
  padding: 18px 20px 18px 30px;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  // margin-bottom: 20px;
  h1 {
    font-weight: 700;
    font-size: 16px;
  }
}
.middle-container {
  height: 20px;
  background-color: #f7f7f7;
}
.main-container {
  padding: 18px 20px 26px 20px;
  background-color: #fff;
  color: #6b6b6bff;
  .choose-container {
    margin-bottom: 21px;
    display: flex;
    // justify-content: center;
    color: #a1a1a5;
    font-size: 12px;
    align-items: center;
    .txt {
      display: flex;
      align-items: center;
      height: 16px;
      div {
        padding: 0 10px;
      }
      .del-item {
        border-left: 1px solid #a1a1a5;
      }
      .del-item:hover {
        cursor: pointer;
      }
    }
  }
  .table-container {
    .table-title {
      padding-left: 24px;
      height: 44px;
      background-color: #f5f5f5ff;
      display: flex;
      align-items: center;
      border: 1px solid #e5e5e5ff;
      span:nth-child(2) {
        margin: 0 224px 0 516px;
      }
    }
    .table-item {
      height: 75px;

      border-bottom: 1px dashed #e5e5e5ff;
      display: flex;
      align-items: center;
      justify-content: start;
      .content {
        margin-left: 10px;
        flex: 1;
      }
      .date {
        width: 90px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: start;
      }
      .details {
        width: 58px;
        margin: 0 75px 0 175px;
      }
      .details:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
